<template>
    <div id="notice">
        <div id="top" align="left" style="margin-top:30px">
            <span>
                <h3 align="left">  人们通常倾向选择与自我兴趣类型匹配的职业环境，如具有现实型兴趣的人希望在现实型的职业环境中工作，
                这样可以最好地发挥个人的潜能。但在具体职业选择中，个体并非一定要选择与自己兴趣完全对应的职业环境，
                这主要是因为个体本身通常是多种兴趣类型的综合体，出现单一类型显著突出的情况不多，
                因此评价个体的兴趣类型时也时常以其在六大类型中得分居前三位的类型组合而成，
                组合时根据每个类型得分高低依次排列字母，构成其兴趣组型，如EIS、AIS等。</h3>
            </span>
            <span>
                <h3 align="left" style="margin-top:30px">注意:
　　霍兰德职业兴趣测试完整版测试题量比较大，测量内容包括职业兴趣类型、职业能力倾向。答案没有好坏、对错之分，不必仔细推敲，结合自己的情况，根据第一印象回答每一题“是”或“否” </h3>
            </span>
        </div>
        <br/><br/>
        <Row>
            <Col span="6">
            <Card  style="width:300px;height:260px;background-color:#151F4F">
                <div style="text-align:center">
                    <p style="color:#ff9900;font-size:50px">1</p>
                    <h1 style="color:#ff9900">注意事项</h1>
                    <h3 >请根据实际情况作答，并以最快速度完成每道问题</h3>
                </div>
            </Card>
            </Col>
            <Col span="6">
            <Card  style="width:300px;height:260px;background-color:#151F4F">
                <div style="text-align:center">
                    <p style="color:#ff9900;font-size:50px">2</p>
                    <h1 style="color:#ff9900">注意事项</h1>
                    <h3>选项没有对错之分</h3>
                </div>
            </Card>
            </Col>
            <Col span="6">
            <Card  style="width:300px;height:260px;background-color:#151F4F">
                <div style="text-align:center">
                    <p style="color:#ff9900;font-size:50px">3</p>
                    <h1 style="color:#ff9900">注意事项</h1>
                    <h3>请选择更接近你的日常感受的选项</h3>
                </div>
            </Card>
            </Col>
            <Col span="6">
            <Card  style="width:300px;height:260px;background-color:#151F4F" type="Warning">
                <div style="text-align:center">
                    <p style="color:#ff9900;font-size:50px">4</p>
                    <h1 style="color:#ff9900">注意事项</h1>
                    <h3 >请选择你是怎样做的，而不是你想要怎样或哪样更好</h3>
                </div>
            </Card>
            </Col>
        </Row>
        <div id="bottom" style="margin-top:30px">
            <Button type="warning" @click="getMyType()">开始测试</Button>
        </div>
    </div>
</template>
<script>
//  import test from '@/views/my-views/test/test.vue';
  import {exam} from '../../../../api/index.js';
  export default {
      data () {
          return {
              userid: '2',
              R: '0',
              I: '0',
              A: '0',
              S: '0',
              E: '0',
              C: '0',
              type: ''
          };
      },
      methods: {
          getMyType () {
              exam.getTypeById({data: {userid: this.userid}}).then((res) => {
                  console.info(res.data);
                  if (res.data.data.type==null) {
                      this.$router.push('/test/question');
                  } else {
                      this.type = res.data.data.type.mytype;
                      this.R = res.data.data.type.r;
                      this.I = res.data.data.type.i;
                      this.A = res.data.data.type.a;
                      this.S = res.data.data.type.s;
                      this.E = res.data.data.type.e;
                      this.C = res.data.data.type.c;
                      alert('您已经测试过了,无法重新测试！');
                      this.$router.push({
                          path: '/test/result',
                          name: 'result',
                          params: {
                              R: this.R,
                              I: this.I,
                              A: this.A,
                              S: this.S,
                              E: this.E,
                              C: this.C,
                              myType: this.type,
                              userid: this.userid
                          }
                      });
                  }
              }, function (error) {
                  this.message(error);
              });
          }
      }
  };
</script>